import {
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Modal } from 'antd';
import React from 'react';

export type FormValueType = {
  /** 标题 */
  title: string;
  /** 描述 */
  description: string;
  /** 任务截止日期 */
  dueDate?: string;
  priority: API.ToDoPriorityType;
  /** 待办分类 */
  categories: number[];
  /** 主键 */
  id?: number;
} & Partial<API.ToDoItemUpdateInputModel>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalOpen: boolean;
  values: Partial<API.ToDoItemUpdateInputModel>;
  toDoItemCategories: Partial<API.CategoryOutputModel>[]; // 新增待办分类类型
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const { toDoItemCategories } = props; // 解构获取分类
  const intl = useIntl();

  const handleCancel = () => {
    props.onCancel();
  };

  return (
    <Modal
      width={640}
      styles={{
        body: {
          padding: '32px 40px 48px',
        },
      }}
      destroyOnClose
      title={intl.formatMessage({
        id: 'pages.user.list.updateForm.updateTodoItem',
        defaultMessage: '更新待办事项',
      })}
      open={props.updateModalOpen}
      footer={null}
      onCancel={handleCancel}
    >
      <ProForm
        initialValues={{
          id: props.values.id,
          title: props.values.title,
          description: props.values.description,
          dueDate: props.values.dueDate,
          priority: props.values.priority,
          categories: props.values.categories || [],
        }}
        onFinish={props.onSubmit}
        submitter={false} // 禁用默认提交按钮
        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
      >
        <ProFormText name="id" hidden />

        <ProFormText
          name="title"
          label={intl.formatMessage({
            id: 'pages.user.list.updateForm.title',
            defaultMessage: '标题',
          })}
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.user.list.updateForm.title.required"
                  defaultMessage="请输入标题！"
                />
              ),
            },
          ]}
          style={{ marginBottom: 24 }}
        />

        <ProFormTextArea
          name="description"
          label={intl.formatMessage({
            id: 'pages.user.list.updateForm.description',
            defaultMessage: '描述',
          })}
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.user.list.updateForm.description.rules"
                  defaultMessage="请输入描述！"
                />
              ),
            },
          ]}
          style={{ marginBottom: 24 }}
        />

        <ProFormDatePicker
          name="dueDate"
          label={intl.formatMessage({
            id: 'pages.user.list.updateForm.dueDate',
            defaultMessage: '任务截止日期',
          })}
          width="md"
          rules={[{ type: 'date', message: '请选择有效日期！' }]}
        />

        <ProFormSelect
          name="priority"
          label={intl.formatMessage({
            id: 'pages.user.list.updateForm.priority',
            defaultMessage: '优先级',
          })}
          width="md"
          options={[
            { label: '高', value: 1 },
            { label: '中', value: 2 },
            { label: '低', value: 3 },
          ]}
          rules={[{ required: true, message: '优先级必填' }]}
        />

        <ProFormSelect
          name="categories"
          label={intl.formatMessage({
            id: 'pages.user.list.updateForm.categories',
            defaultMessage: '分类',
          })}
          width="md"
          options={props.toDoItemCategories.map((cat) => ({
            label: cat.name,
            value: cat.id,
          }))}
          mode="multiple" // 允许多选
          rules={[{ required: true, message: '至少选择一个分类' }]}
        />

        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
          <Button style={{ marginRight: 8 }} onClick={handleCancel}>
            {intl.formatMessage({
              id: 'pages.searchTable.updateForm.cancel',
              defaultMessage: '取消',
            })}
          </Button>
          <Button type="primary" htmlType="submit">
            {intl.formatMessage({
              id: 'pages.searchTable.updateForm.submit',
              defaultMessage: '提交',
            })}
          </Button>
        </div>
      </ProForm>
    </Modal>
  );
};

export default UpdateForm;
